import React, { useState, useEffect,useReducer } from 'react'
import { reqRightL, reqLeftL } from '../../request/api'
import {initState,reducer} from "./List.js"
// 引入css
import "./List.css"
// 引入模块
import LeftL from "./components/LeftL/LeftL"
import RightL from "./components/RightL/RightL"
export default function List(props) {
    const goBack=()=>{
        props.history.go(-1)
    }
    let [arr, setArr] = useState([])
    const [state, dispatch] = useReducer(reducer, initState)
    const changen=(n,id)=>{
        //修改了n
        dispatch({type:"changen",n})
        //发请求取list
        reqRightL({fid:id}).then(res=>{
            dispatch({type:"changeList",list:res.list})
        })
    }
    useEffect(() => {
        reqLeftL().then(res => {
            setArr(res.list)
            changen(0,res.list[0].id)
        })
    }, [])
    return (
        <div id="box">
            {/* 最顶端部分 */}
            <div id="top1">
                <div className="top1">
                    <i className="iconfont ii" onClick={()=>goBack()}>&#xe6bc;</i>
                    <h2>商品分类</h2>
                </div>
                <div className="bottom1">
                    <input type="text" className="iconfont" placeholder="&#xe610; 按内容搜索" />
                </div>
            </div>
            {/* 内容区 */}
            <div id="neirong">
                <div className="left">
                    <LeftL arr={arr} changen={(a,b)=>changen(a,b)} n={state.n}></LeftL>
                </div>
                <div className="right">
                    <RightL list={state.list}></RightL> 
                </div>
            </div>
        </div>
    )
}
